<template>
<div class="">
  <el-dialog :title="title" width="780px" class="icon-dialog" top="5vh" :visible.sync="show" @open="open" :before-close="closeForm" :close-on-click-modal="false">
    <el-form :model="form" :rules="formRules" ref="form" label-width="120px" class="demo-ruleForm" @submit.native.prevent>
      <div  v-for="(item,k) in form.field"  :key="k">
        <el-form-item :label="item.field_name" :prop="item.field_code">
          <div v-if="item.field_type == 1">
            <el-input type="text" v-model="item.value" :placeholder="'请输入'+item.field_name" size="medium" style="width:400px;" ></el-input>
          </div>
          <div v-if="item.field_type == 2">
            <el-select v-model="item.value" placeholder="请选择" clearable size="medium" >
              <el-option v-for="(item1,k1) in item.option" :key="k1" :label="item1.name" :value="item1.id">
              </el-option>
            </el-select>&nbsp;
            <router-link :to="{path: item.option_business_url, query:{bid: item.option_business_id, name:item.option_business_name}}" target="_blank">
              <el-button type="primary" size="small" v-if="item.option_type == 2">添加{{item.field_name}}</el-button>
            </router-link>&nbsp;
            <el-button type="primary" size="small"  icon="el-icon-refresh"  v-if="item.option_type == 2" @click="open"></el-button>
          </div>

          <div v-if="item.field_type == 3">
            <el-checkbox-group v-model="item.value">
              <el-checkbox :label="item1.id" v-for="(item1,k2) in item.option" :key="k2">{{ item1.name }}</el-checkbox>
            </el-checkbox-group>&nbsp;
            <router-link :to="{path: item.option_business_url, query:{bid: item.option_business_id, name:item.option_business_name}}" target="_blank">
            <el-button type="primary" size="small"  v-if="item.option_type == 2">添加{{item.field_name}}</el-button>
            </router-link>&nbsp;
            <el-button type="primary" size="small" icon="el-icon-refresh"  v-if="item.option_type == 2" @click="open"></el-button>
          </div>

          <div v-if="item.field_type == 5">
            <el-input type="textarea" v-model="item.value" size="medium" clearable :placeholder="'请输入'+item.field_name" style="width:400px;"></el-input>
          </div>
          <div v-if="item.field_type == 6">
            <el-date-picker v-model="item.value"  type="date"  placeholder="选择日期" clearable size="medium" ></el-date-picker>
          </div>
          <div v-if="item.field_type == 7">
            <el-time-select clearable v-model="item.value" placeholder="选择时间"
                :picker-options="{
                  start: '00:00',
                  step: '00:15',
                  end: '23:30'
                }">
            </el-time-select>
          </div>
          <div v-if="item.field_type == 8">
            <el-date-picker v-model="item.value"  type="datetime"  placeholder="选择日期" clearable size="medium" ></el-date-picker>
          </div>
          <div v-if="item.field_type == 11">
            <el-date-picker
                clearable
                v-model="item.value"
                type="month"
                :placeholder="'选择'+item.field_name" size="medium" >
            </el-date-picker>
          </div>
          <div v-if="item.field_type == 4">
            <el-switch active-value="1" inactive-value="0" v-model="item.value"></el-switch>
          </div>
          <div v-if="item.field_type == 9">
            <ImagesUpload :mode="true" fileType="images" uploadType="1" :images="item.value"></ImagesUpload>
          </div>
        </el-form-item>
      </div>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" size="medium" @click="onSubmit()" v-if="!loading">确 定</el-button>
      <el-button type="primary" size="medium" v-else>保存中..</el-button>
      <el-button size="medium" @click="closeForm">取 消</el-button>
    </div>
  </el-dialog>
</div>
</template>

<script>
import { saveData,getInfoField,getDataInfo } from '@/api/user/basic'
import ImagesUpload from '@/components/common/ImagesUpload.vue'

export default {
  name: "basic_edit_data",
  components: {ImagesUpload},
  props: {
    show: {
      type: Boolean,
      default: false
    },
    info: {
      type: Object,
      default: {}
    },
/*    id: {
      type: String,
      default: '',
    },*/
    bid: {
      type: Number,
      default: 0,
    },
    name: {
      type: String,
      default: '',
    }
  },
  data() {
    /*let validate = (rule, value, callback) => {
      console.log(this.form)
      callback()
    };*/
    return {
      title: '编辑',
      activeName: '1',
      form: {
        id: typeof this.id != 'undefined' ? this.id : '',
        field: [],
        compute_rules: [],
      },
      compute_field_list: [],
      rule_text: '',
      formRules: {
       //name: [{required: true, validator: validate, message: '请输入名称', trigger: 'blur'}],
        /*         type: [{required: true, message: '请选择类型', trigger: 'blur'}],*/
      },
      list: [],
      loading: false,
      image_status: true,
    }
  },
  created() {

  },
  methods: {
    validate(rule, value, callback) {
      if (typeof this.form.field[rule.field] != 'undefined' && this.form.field[rule.field].value == '') {
        callback(new Error('请填写'+this.form.field[rule.field].field_name))
      } else {
        callback()
      }
    },
    open() {
      this.title = '添加'+this.name
      if (typeof this.info.id != 'undefined') {
        this.form.id = this.info.id
        this.title = '编辑'+this.name
        this.getDataInfo()
      } else {
        this.form.id = ''
        if (typeof this.bid != 'undefined') {
          this.getInfoField()
        }
      }
    },
    getDataInfo() {
      getDataInfo({id: this.form.id, type: 'edit'}).then(res=>{
        this.form.field = JSON.parse(JSON.stringify(res.data.list))
        this.form.id = res.data.id
        this.form.compute_rules = res.data.compute_rules
        this.compute_field_list = res.data.compute_field_list
      })
    },
    computeData(item) {
      for (let i in this.form.field) {
        if (item.field_list.indexOf(this.form.field[i].field_code) >= 0 && this.form.field[i].value == '') {
          this.$message.error('当前选项值必须填写：'+this.form.field[i].field_name)
          return false
        }
      }
      computeData({compute_rules: item, field: this.form.field}).then(res=>{
        if (res.code == 0) {
          this.form.field = res.data.field
          this.rule_text = res.data.rule
        }
      })
    },
    getInfoField() {
      getInfoField({id: this.bid}).then(res => {
        if (res.code == 0) {
          this.form.field = JSON.parse(JSON.stringify(res.data.list))
          this.formRules = JSON.parse(JSON.stringify(res.data.form_rule))
          this.form.compute_rules = res.data.compute_rules
          this.compute_field_list = res.data.compute_field_list
          for (let i in this.formRules) {
            this.formRules[i][0].validator = this.validate
          }
        }
      })
    },
    onSubmit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.loading = true
          saveData(this.form).then(res => {
            this.loading = false
            if (res.code == 0) {
              this.form.id = ''
              this.$message.success('操作成功')
              this.$emit('callFn', {id: res.data.id})
              this.closeForm()
            }
          })
        }
      })
    },
    closeForm() {
      this.$emit('update:show', false)
    },
  }
}
</script>

<style scoped lang="scss">
.form {
  .submit_btn {
    margin-left: 120px;
  }
  /deep/.el-tabs {
    width: 99%;
    margin: 0 auto;
  }
  .data {
    width: 90%;
    border-radius: 5px;
    background: #f3f3f3;
    margin-bottom: 10px;
    position: relative;
    .el-icon-circle-close {
      position: absolute;
      top: -6px;
      right: -8px;
      font-size: 20px;
      cursor:pointer;
    }
    .data_list {
      display: flex;
      margin: 5px;
      line-height: 50px;
      .option_list {
        margin-right: 10px;
      }
    }
  }
}
</style>